http 模組來打造伺服器,你應該發現了:如果要處理幾十個不同的網址路徑,寫一大堆 if...else 簡直是一場災難。在開始之前,我們為第二階段建立一個全新的專案資料夾。打開終端機,執行以下指令:
mkdir express-api
cd express-api
npm init -y
npm install express
(記得去 package.json 裡面補上 "type": "module",我們依然要使用現代的 ESM 語法!)
在資料夾內建立 app.js,輸入以下程式碼:
import express from 'express';
// 1. 建立 Express 應用程式實例
const app = express();
const PORT = 3000;
// 2. 設定路由 (Route)
// 當使用者對根目錄 '/' 發送 GET 請求時,執行這個函式
app.get('/', (req, res) => {
// Express 自動幫你處理了 Content-Type 和狀態碼 200
res.send('<h1> 歡迎來到 Express.js 的世界!</h1>');
});
app.get('/api/users', (req, res) => {
const users = [
{ id: 1, name: 'Node Master' },
{ id: 2, name: 'Express Rookie' }
];
// 使用 res.json() 會自動將陣列/物件轉為 JSON 字串並回傳
res.json(users);
});
// 3. 啟動伺服器
app.listen(PORT, () => {
console.log(` Express 伺服器已啟動:http://localhost:${PORT}`);
});
執行 node app.js 並打開瀏覽器測試。你會發現程式碼比 Day 4 乾淨了非常多!沒有 res.writeHead,沒有 res.end(JSON.stringify(...)),Express 內建的 res.send() 和 res.json() 幫你搞定了一切。
後端最重要的事情就是處理前端傳來的資料。在 Express 中,前端傳資料通常有三種方式,我們都能輕鬆透過 req 物件取得:
req.query常用於搜尋、篩選或分頁。例如網址是 http://localhost:3000/search?keyword=node&page=2。
app.get('/search', (req, res) => {
const { keyword, page } = req.query; // 取得 ? 後面的參數
res.json({
message: '搜尋成功',
keyword: keyword,
page: page
});
});
req.params常用於指定某個特定資源。例如網址是 http://localhost:3000/users/99。
// 在路由中使用冒號 : 代表這是一個動態參數
app.get('/users/:id', (req, res) => {
const userId = req.params.id; // 取得網址上的 99
res.json({
message: `取得 ID 為 ${userId} 的使用者資料`
});
});
req.body當前端透過 POST 方法發送表單或 JSON 資料時使用。注意:Express 預設看不懂 JSON 請求體,你必須在所有路由的最上方加入一行「解析器(中介軟體)」。
請在 app.js 的 const app = express(); 下方加入這行:
// 告訴 Express:請幫我把所有傳入的 JSON 資料解析成 JavaScript 物件
app.use(express.json());
app.post('/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === '1234') {
res.json({ success: true, message: '登入成功' });
} else {
// 設定 HTTP 狀態碼為 401 (未授權) 並回傳錯誤訊息
res.status(401).json({ success: false, message: '帳號或密碼錯誤' });
}
});
針對 POST 請求,瀏覽器網址列是無法直接觸發的。你需要下載並使用如 Postman 或 VS Code 擴充套件 Thunder Client 來發送帶有 JSON Body 的 POST 請求到 http://localhost:3000/login。